<template>
  <div class="search-filter-container">
    <!-- 搜索功能 -->
    <div class="search-container">
      <input 
        type="text" 
        v-model="localSearchQuery" 
        @input="handleSearch"
        placeholder="搜索项目名称或ID..."
        class="search-input"
      >
      <button @click="clearSearch" class="clear-search-btn" v-if="localSearchQuery">
        ×
      </button>
    </div>
    
    <!-- 基础筛选 -->
    <div class="filter-controls">
      <label for="status-filter">状态筛选:</label>
      <select id="status-filter" v-model="localStatusFilter" @change="applyFilters">
        <option value="">全部状态</option>
        <option value="active">活跃</option>
        <option value="pending">待处理</option>
        <option value="completed">已完成</option>
        <option value="error">错误</option>
      </select>
      
      <label for="value-filter">数值筛选:</label>
      <input 
        type="range" 
        id="value-filter" 
        v-model.number="localValueFilter" 
        @input="applyFilters"
        min="100" 
        max="1000" 
        step="50"
      >
      <span>≥ {{ localValueFilter }}</span>
    </div>
    
    <!-- 排序控制 -->
    <div class="sort-controls">
      <label for="sort-field">排序字段:</label>
      <select id="sort-field" v-model="localSortField" @change="applySort">
        <option value="id">ID</option>
        <option value="name">名称</option>
        <option value="value">数值</option>
        <option value="status">状态</option>
      </select>
      
      <button @click="toggleSortOrder" class="sort-btn">
        {{ localSortOrder === 'asc' ? '↑' : '↓' }} 排序
      </button>
      
      <button @click="resetAll" class="reset-btn">
        重置筛选
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

// Props定义
const props = defineProps({
  searchQuery: {
    type: String,
    default: ''
  },
  statusFilter: {
    type: String,
    default: ''
  },
  valueFilter: {
    type: Number,
    default: 100
  },
  sortField: {
    type: String,
    default: 'id'
  },
  sortOrder: {
    type: String,
    default: 'asc'
  }
})

// Emits定义
const emit = defineEmits([
  'update:searchQuery', 
  'update:statusFilter', 
  'update:valueFilter',
  'update:sortField',
  'update:sortOrder',
  'filters-change',
  'sort-change',
  'reset'
])

// 本地响应式状态
const localSearchQuery = ref(props.searchQuery)
const localStatusFilter = ref(props.statusFilter)
const localValueFilter = ref(props.valueFilter)
const localSortField = ref(props.sortField)
const localSortOrder = ref(props.sortOrder)

// 防抖计时器
let searchDebounceTimer = null

// 监听props变化，同步到本地状态
watch(() => props.searchQuery, (newValue) => {
  localSearchQuery.value = newValue
})

watch(() => props.statusFilter, (newValue) => {
  localStatusFilter.value = newValue
})

watch(() => props.valueFilter, (newValue) => {
  localValueFilter.value = newValue
})

watch(() => props.sortField, (newValue) => {
  localSortField.value = newValue
})

watch(() => props.sortOrder, (newValue) => {
  localSortOrder.value = newValue
})

// 处理搜索（带防抖）
const handleSearch = () => {
  clearTimeout(searchDebounceTimer)
  searchDebounceTimer = setTimeout(() => {
    emit('update:searchQuery', localSearchQuery.value)
    emit('filters-change', {
      searchQuery: localSearchQuery.value,
      statusFilter: localStatusFilter.value,
      valueFilter: localValueFilter.value
    })
  }, 300) // 300ms防抖
}

// 清除搜索
const clearSearch = () => {
  localSearchQuery.value = ''
  handleSearch()
}

// 应用筛选条件
const applyFilters = () => {
  emit('update:statusFilter', localStatusFilter.value)
  emit('update:valueFilter', localValueFilter.value)
  emit('filters-change', {
    searchQuery: localSearchQuery.value,
    statusFilter: localStatusFilter.value,
    valueFilter: localValueFilter.value
  })
}

// 切换排序顺序
const toggleSortOrder = () => {
  localSortOrder.value = localSortOrder.value === 'asc' ? 'desc' : 'asc'
  applySort()
}

// 应用排序
const applySort = () => {
  emit('update:sortField', localSortField.value)
  emit('update:sortOrder', localSortOrder.value)
  emit('sort-change', {
    field: localSortField.value,
    order: localSortOrder.value
  })
}

// 重置所有筛选和排序
const resetAll = () => {
  localSearchQuery.value = ''
  localStatusFilter.value = ''
  localValueFilter.value = 100
  localSortField.value = 'id'
  localSortOrder.value = 'asc'
  
  // 发出更新事件
  emit('update:searchQuery', '')
  emit('update:statusFilter', '')
  emit('update:valueFilter', 100)
  emit('update:sortField', 'id')
  emit('update:sortOrder', 'asc')
  emit('reset')
}
</script>

<style scoped>
.search-filter-container {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.search-container {
  position: relative;
  margin-bottom: 15px;
}

.search-input {
  width: 100%;
  padding: 10px 40px 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.clear-search-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
}

.filter-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.filter-controls label {
  font-weight: 500;
  font-size: 14px;
  min-width: 80px;
}

.filter-controls select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
}

.filter-controls input[type="range"] {
  width: 150px;
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.sort-controls label {
  font-weight: 500;
  font-size: 14px;
  min-width: 80px;
}

.sort-controls select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
}

.sort-btn, .reset-btn {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.sort-btn:hover, .reset-btn:hover {
  background-color: #e9e9e9;
}

/* 深色模式下的样式 */
:global(.dark-mode) .search-filter-container {
  background-color: #2d2d2d;
}

:global(.dark-mode) .search-input,
:global(.dark-mode) .filter-controls select,
:global(.dark-mode) .sort-controls select,
:global(.dark-mode) .sort-btn,
:global(.dark-mode) .reset-btn {
  background-color: #444;
  border-color: #666;
  color: #fff;
}

:global(.dark-mode) .clear-search-btn {
  color: #bbb;
}

:global(.dark-mode) .sort-btn:hover,
:global(.dark-mode) .reset-btn:hover {
  background-color: #555;
}
</style>